import React, { useState } from 'react';
import axios from 'axios'
import './css/music.css'

import MusicItem from './musicItem'

const Music = () => {
    let [playlists, setPlaylist] = useState([])
    React.useEffect(() => {
        axios
            .get(`http://122.112.161.135:3000/top/playlist?cat=华语`)
            .then(res => {
                setPlaylist(res.data.playlists)
            })
    }, [])
    const musicItem = playlists.map(item => {
        return (<MusicItem key={item.id} item={item}></MusicItem>)
    })
    return (
        <div className='flex'>{musicItem}</div>
    );
}

export default Music;
